<template lang="html">
  <div id="stable">
    <el-table :data="this.$store.getters.mylist.tableList" style="width: 100%">
      <el-table-column label="员工姓名" prop="staff.name">
      </el-table-column>
      <el-table-column label="员工编号" prop="staffid">
      </el-table-column>
      <el-table-column label="基本工资" prop="basicwage">
      </el-table-column>
      <el-table-column label="奖惩工资" prop="incentivewage">
      </el-table-column>
      <el-table-column label="考勤工资" prop="attendancewage">
      </el-table-column>
      <el-table-column label="工资" prop="wage">
      </el-table-column>
      <el-table-column label="操作" width="170px">
        <template slot-scope="scope">
          <el-button-group>
            <el-button @click="handleEdit(scope.$index, scope.row)" type="primary" size="mini" icon="el-icon-tickets"></el-button>
            <el-button @click="handleUpdata(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="工资修改" :visible.sync="dialogEditVisible">
      <el-form :model="form" :rules="rules" ref="editfrom">
        <el-form-item label="基本工资" :label-width="formLabelWidth" prop="basicwage">
          <el-input v-model="form.basicwage" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitAdd('editfrom')">取 消</el-button>
        <el-button type="primary" @click="addGZ('editfrom')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'Stable',
  components: {

  },
  data() {
    return {
      dialogEditVisible: false,
      form: {
        staffid :'',
        basicwage: ''
      },
      formLabelWidth: '120px',
      rules: {
        basicwage: [
          { required: true, message: '工资不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/, message: '金钱数值不合法', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
     ...mapActions(['getTable','expend/getLists','expend/opList']),
    handleUpdata(index, row) {//点击修改
      this.form.staffid =row.staffid;
      this.form.basicwage=row.basicwage;
      this.dialogEditVisible = true;
    },
    exitAdd(){//取消修改
      this.form.basicwage='';
       this.dialogEditVisible = false;
    },
    addGZ(formName){//确定修改
       this.$refs[formName].validate((valid) => {
          if (valid) {
            this['expend/opList']([url.updateGZData,this.form]).then(res=>{
              return this.$store.commit('expend/message',{res:res,tt:this})
            }).catch(err=>{
              console.log(err)
            }).then(res=>{
              this['expend/getLists']([url.getGZData])
              this.dialogEditVisible=false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
  },
}

</script>
<style lang="less">
</style>


